import 'dart:convert';
import 'dart:io';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path_provider/path_provider.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/dail/dial_dialog.dart';
import 'package:share_fit/app/controllers/device/dail/dial_limit_view.dart';
import 'package:share_fit/app/controllers/device/dail/dial_model.dart';
import 'package:share_fit/app/controllers/device/dail/dial_show_view.dart';
import 'package:share_fit/app/controllers/device/dail/dial_state.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/app/tools/log_utils.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'dial_const.dart';
import 'dial_logic.dart';

class DialPage extends StatefulWidget {
  const DialPage({super.key});

  @override
  State<DialPage> createState() => _TabPageState();

}

class _TabPageState extends State<DialPage>
    with SingleTickerProviderStateMixin {

  late TabController _tabController;
  final logic = Get.put(DialLogic());
  final state = Get.find<DialLogic>().state;

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
    List<dynamic> lists = logic.read('download_lists', defaultValue: []);
    if (state.downlodLists.isEmpty) {
      state.downlodLists.addAll(lists);
    }

    _tabController.addListener(() {
      if (_tabController.index == 1) {
        List<dynamic> lists = logic.read('download_lists', defaultValue: []);
        if (state.downlodLists.isEmpty) {
          state.downlodLists.addAll(lists);
        }
        logic.updateDownloadDials();
      }
      else if (_tabController.index == 2) {
        logic.getServerWatchFace();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(
            alignment: Alignment.topLeft,
            child: TabBar(
              tabs: state.dialTabs,
              controller: _tabController,
              tabAlignment: TabAlignment.start,
              isScrollable: true,
              dividerHeight: 0,
              labelPadding: const EdgeInsets.symmetric(horizontal: 10),
              labelStyle: TextStyle(
                  color: ColorConst.activeColor, fontSize: 48.sp),
              unselectedLabelStyle: TextStyle(
                  color: ColorConst.btnFontColor, fontSize: 48.sp),
              indicator: UnderlineTabIndicator(
                  borderSide: BorderSide(
                      width: 5, color: ColorConst.activeColor),
                  borderRadius: BorderRadius.circular(10)
              ),
              indicatorSize: TabBarIndicatorSize.label,
            )),
        leading: BackBtnIcon(onTap: () => Get.back()),
      ),
      body: TabBarView(controller: _tabController, children: [
        _buildOnlineWatchFace(context),
        _buildMyWatchFace(context),
        _buildCustomWatchFace(context)
      ]),);
  }

  Widget _buildOnlineWatchFace(BuildContext context) {
    return FutureBuilder<List<DialModel>>(
      future: logic.getWatchFaceOnlineInformation(false),
      builder:
          (BuildContext buildContext, AsyncSnapshot<List<DialModel>> snapshot) {
        return snapshot.connectionState == ConnectionState.done
            ? snapshot.hasData && snapshot.data!.isNotEmpty
            ? ListView.builder(
            padding: EdgeInsets.only(bottom: 100.h),
            itemCount: 1,
            itemBuilder: (context, index) {
              return Container(
                margin: EdgeInsets.all(42.w),
                padding: EdgeInsets.fromLTRB(45.w, 60.h, 45.w, 60.h),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10)
                ),
                child: Column(
                  children: [
                    GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        Get.toNamed('/device/settings/dial/more');
                      },
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Opacity(opacity: 0,
                            child: Text(LocaleKeys.dial_machinery.ts,
                              style: TextStyle(fontSize: 54.sp,
                                  color: ColorConst.btnFontColor),),),
                          const Icon(Icons.arrow_forward_ios, size: 16,)
                        ],),
                    ),
                    SizedBox(height: 59.h,),
                    Container(
                      height: 400.h,
                      child: GetBuilder<DialLogic>(
                          id: DialConst.dialListViewId,
                          builder: (_) {
                            return GridView.builder(
                              shrinkWrap: true,
                              physics: const NeverScrollableScrollPhysics(),
                              scrollDirection: Axis.vertical,
                              itemCount: min(4, state.lists.length),
                              itemBuilder: (BuildContext context, int index) {
                                return _buildItem(
                                    context, index, state.lists[index], false);
                              },
                              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                mainAxisExtent: 450.h,
                                crossAxisCount: 4,),
                            );
                          }),
                    ),
                  ],),);
            }) : const Center(
                    child: Text('Empty'),
                  )
            : Center(
          child: CircularProgressIndicator(color: ColorConst.accentColor,),
        );
      },
    );
  }

  Widget _buildMyWatchFace(BuildContext context) {
    return Stack(children: [
      Container(
          padding: EdgeInsets.only(top: 42.h),
          child: Column(
            children: [
              Expanded(child: Container(
                margin: EdgeInsets.only(left: 42.w, right: 42.w),
                child: GetBuilder<DialLogic>(
                    id: DialConst.dialDownloadViewId,
                    builder: (_) {
                      return GridView.builder(
                        scrollDirection: Axis.vertical,
                        itemCount: state.downlodLists.length,
                        itemBuilder: (BuildContext context, int index) {
                          DialModel model = DialModel().fromJson(
                              jsonDecode(state.downlodLists[index]));
                          model.isSelect = state.selectedAll;
                          return _buildItem(context, index, model, true);
                        },
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          mainAxisExtent: 450.h,
                          mainAxisSpacing: 80.w,
                          crossAxisCount: 4,),
                      );
                    }),
              )),
              GetBuilder<DialLogic>(
                  id: DialConst.showSelectedViewId,
                  builder: (_) {
                    return Offstage(
                      offstage: !state.isShowSelected,
                      child: Container(
                        padding: EdgeInsets.only(top: 20.h, bottom: 20.h),
                        color: Colors.white,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            GestureDetector(
                              onTap: () {
                                for (int i = 0; i <
                                    state.downlodLists.length; i++) {
                                  DialModel dm = DialModel().fromJson(
                                      jsonDecode(state.downlodLists[i]));
                                  dm.isSelect = true;
                                  state.downlodLists[i] = dm.toJson();
                                }

                                state.selectedAll = true;
                                logic.update([DialConst.dialDownloadViewId]);
                              },
                              child: Column(
                                children: [
                                  const Icon(Icons.check_box_outlined),
                                  Text(LocaleKeys.select_all.ts)
                                ],),),
                            GestureDetector(
                              onTap: () {
                                _onDelete();
                                },
                                child: Column(
                                children: [
                                  const Icon(Icons.delete_forever_outlined),
                                  Text(LocaleKeys.delete.ts)
                                ],),),
                          ],),),);
                  })
            ],
          )
      ),
      GestureDetector(
          onTap: () {
            logic.isShowSelected(!state.isShowSelected);
          },
          child: Container(
            width: 150.w,
            height: 150.h,
            alignment: Alignment.center,
            margin: EdgeInsets.fromLTRB(1.sw - 200.w, 1.sh - 1.sh / 3, 42.w, 0),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(50)
            ),
            child: const Opacity(
              opacity: 0.3, child: Icon(Icons.border_color_outlined),),
          ))
    ],);
  }

  Widget _buildCustomWatchFace(BuildContext context) {
    return GetBuilder<DialLogic>(
      id: 'custom_watchface_tab',
        builder: (logic) {
      return state.serverWatchFace.isEmpty ? const Center() :  SingleChildScrollView(
        child: Column(
          children: [
            Stack(
              children: [
                GetBuilder<DialLogic>(
                    id: 'update_dial_image',
                    builder: (_) {
                      return Visibility(
                          visible: state.dialImagePath.isNotEmpty,
                          replacement: Container(
                            margin: EdgeInsets.only(top: 100.h),
                            width: state.maxWidth.w,
                            height: state.maxHeight.h,
                            child: Visibility(
                              visible: state.serverWatchFaceInfo
                                  .isNotEmpty,
                              replacement: Container(
                                width: state.maxWidth.w,
                                height: state.maxHeight.h,
                              ),
                              child: Container(
                                  width: state.maxWidth.w,
                                  height: state.maxHeight.h,
                                  decoration: BoxDecoration(
                                    image: DecorationImage(
                                        fit: BoxFit.fill,
                                        image: NetworkImage(state
                                            .serverWatchFaceInfo['defaultBg'])),
                                  )
                              ),
                            ),
                          ),
                          child: Container(
                            margin: EdgeInsets.only(top: 100.h),
                            width: state.maxWidth.w,
                            height: state.maxHeight.h,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              image: DecorationImage(
                                  fit: BoxFit.fill,
                                  image: FileImage(
                                      File(state.dialImagePath))),
                            ),));
                    }),
                Container(
                    margin: EdgeInsets.only(top: 100.h),
                    width: state.maxWidth.w,
                    height: state.maxHeight.h,
                    child: GetBuilder<DialLogic>(
                      id: 'position_index',
                      builder: (_) {
                        return Container(
                          margin: EdgeInsets.only(top: 50.h, bottom: 50.h),
                          width: state.maxWidth.w,
                          height: state.maxHeight.h,
                          alignment: state.positionIndex ==
                              DialState.POSITION_TOP_CENTER ? Alignment
                              .topCenter : Alignment.bottomCenter,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                fit: BoxFit.fill,
                                image: NetworkImage(state.positionIndex ==
                                    DialState.POSITION_TOP_CENTER ? state
                                    .widgetPosition1Bg : state
                                    .widgetPosition2Bg)),
                          ),);
                      },)
                ),
              ],),
            Container(
              width: 1.sw,
              margin: EdgeInsets.only(left: 42.w, top: 50.h),
              child: Text(LocaleKeys.dial_image_background_setting.ts),
            ),
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 42.w, top: 30.h),
              child: GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  if (state.dialImagePath.isNotEmpty) {
                    logic.showTips('', LocaleKeys.dial_image_limits_tips.ts);
                    return;
                  }
                  Get.bottomSheet(Container(
                    padding: EdgeInsets.fromLTRB(42.w, 0, 42.w, 50.w),
                    child: Container(
                      width: 1.sw,
                      height: 550.h,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(20)
                      ),
                      child: Column(
                        children: [
                          GestureDetector(
                            onTap: () {
                              logic.getPhoto();
                              Get.back();
                            },
                            behavior: HitTestBehavior.opaque,
                            child: Container(
                              width: 1.sw,
                              height: 150.h,
                              alignment: Alignment.center,
                              child: Text(LocaleKeys.person_avatar_camera.ts,
                                style: TextStyle(fontSize: 46.sp),),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.fromLTRB(42.w, 0.h, 42.w, 0),
                            child: Divider(height: 1.h,),
                          ),
                          GestureDetector(
                            onTap: () {
                              logic.getImage();
                              Get.back();
                            },
                            behavior: HitTestBehavior.opaque,
                            child: Container(
                              width: 1.sw,
                              height: 150.h,
                              alignment: Alignment.center,
                              child: Text(LocaleKeys.dial_image_from_album.ts,
                                style: TextStyle(fontSize: 46.sp),),
                            ),
                          ),
                          GestureDetector(
                            onTap: () {
                              Get.back();
                            },
                            behavior: HitTestBehavior.opaque,
                            child: Container(
                              width: 1.sw,
                              height: 140.h,
                              alignment: Alignment.center,
                              margin: EdgeInsets.fromLTRB(
                                  100.w, 50.h, 100.w, 0),
                              decoration: BoxDecoration(
                                  color: ColorConst.gray50,
                                  borderRadius: BorderRadius.circular(30)),
                              child: Text(LocaleKeys.cancel.ts,
                                style: TextStyle(fontSize: 46.sp),),
                            ),),
                        ],),),
                  ),);
                },
                child: Container(
                  width: 150.w,
                  height: 150.h,
                  decoration: BoxDecoration(
                    color: ColorConst.gray50,
                    borderRadius: BorderRadius.circular(50),
                  ),
                  child: Icon(Icons.photo_size_select_actual_outlined),
                ),
              ),
            ),
            Container(
              width: 1.sw,
              margin: EdgeInsets.only(left: 70.w,),
              child: Text(LocaleKeys.dial_image_background.ts),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(42.w, 50.h, 42.w, 0),
              child: Opacity(opacity: 0.5, child: Divider(height: 1.h,),),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(42.w, 50.h, 42.w, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(LocaleKeys.dial_image_album.ts),
                  GetBuilder<DialLogic>(
                      id: 'update_dial_image',
                      builder: (_) {
                        return Offstage(offstage: state.dialImagePath
                            .isEmpty,
                            child: GestureDetector(
                              onTap: () {
                                logic.updateImageEditState(
                                    !state.imageEdit);
                              },
                              child: GetBuilder<DialLogic>(
                                id: 'update_dial_image_edit',
                                builder: (_) {
                                  return Text(state.imageEdit ? LocaleKeys
                                      .register_info_completed.ts : LocaleKeys
                                      .alarm_edit.ts, style: TextStyle(
                                      color: ColorConst.accentColor),);
                                },
                              ),
                            ));
                      })
                ],),),
            Container(
              margin: EdgeInsets.only(left: 42.w, top: 20.h),
              alignment: Alignment.centerLeft,
              child: GetBuilder<DialLogic>(
                id: 'update_dial_image',
                builder: (_) {
                  return Visibility(
                    visible: state.dialImagePath.isNotEmpty,
                    replacement: Container(
                      width: 1.sw,
                      height: 300.h,
                      alignment: Alignment.center,
                      margin: EdgeInsets.fromLTRB(42.w, 0.h, 84.w, 0),
                      decoration: BoxDecoration(
                          color: ColorConst.gray50,
                          borderRadius: BorderRadius.circular(10)),
                      child: Text(LocaleKeys.dial_album_empty.ts,
                        style: TextStyle(color: ColorConst.gray300),),
                    ),
                    child: GetBuilder<DialLogic>(
                      id: 'update_dial_image_edit',
                      builder: (_) {
                        return Stack(
                          children: [
                            Container(
                              width: 230.w,
                              height: 300.h,
                              margin: EdgeInsets.only(top: 30.h),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(15),
                                image: DecorationImage(
                                    fit: BoxFit.fill,
                                    image: FileImage(
                                        File(state.dialImagePath))),
                                border: Border(
                                    left: BorderSide(width: 10.w,
                                        color: state.imageEdit ? Colors
                                            .transparent : ColorConst
                                            .accentColor),
                                    top: BorderSide(width: 10.w,
                                        color: state.imageEdit ? Colors
                                            .transparent : ColorConst
                                            .accentColor),
                                    right: BorderSide(width: 10.w,
                                        color: state.imageEdit ? Colors
                                            .transparent : ColorConst
                                            .accentColor),
                                    bottom: BorderSide(width: 10.w,
                                        color: state.imageEdit ? Colors
                                            .transparent : ColorConst
                                            .accentColor)),),
                            ),
                            Offstage(offstage: !state.imageEdit,
                              child: GestureDetector(
                                onTap: () {
                                  logic.updateDialImage('');
                                  logic.updateImageEditState(false);
                                }, behavior: HitTestBehavior.opaque,
                                child: Container(margin: EdgeInsets.only(
                                    left: 190.w, bottom: 10.h),
                                  width: 50.w, height: 50.w,
                                  child: Icon(Icons.remove_circle_outline,
                                    color: ColorConst.accentColor,),
                                ),
                              ),)
                          ],);
                      },),
                  );
                },
              ),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(42.w, 50.h, 42.w, 0),
              child: Opacity(opacity: 0.5, child: Divider(height: 1.h,),),
            ),
            Container(
              width: 1.sw,
              margin: EdgeInsets.only(left: 42.w, top: 50.h),
              child: Text(LocaleKeys.dial_position_index.ts),
            ),
            Row(
              children: [
                GetBuilder<DialLogic>(
                    id: 'position_index',
                    builder: (_) {
                      return GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          logic.setImageWatchFace(1).then((value) =>
                              logic.updatePositionIndex(1));
                        },
                        child: Container(
                          margin: EdgeInsets.only(top: 30.h, left: 42.w),
                          width: state.maxWidth.w / 3 * 2,
                          height: state.maxHeight.h / 3 * 2,
                          alignment: Alignment.topCenter,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            border: Border(
                                left: BorderSide(width: 10.w,
                                    color: state.positionIndex ==
                                        DialState.POSITION_TOP_CENTER
                                        ? ColorConst.accentColor
                                        : Colors.transparent),
                                top: BorderSide(width: 10.w,
                                    color: state.positionIndex ==
                                        DialState.POSITION_TOP_CENTER
                                        ? ColorConst.accentColor
                                        : Colors.transparent),
                                right: BorderSide(width: 10.w,
                                    color: state.positionIndex ==
                                        DialState.POSITION_TOP_CENTER
                                        ? ColorConst.accentColor
                                        : Colors.transparent),
                                bottom: BorderSide(width: 10.w,
                                    color: state.positionIndex ==
                                        DialState.POSITION_TOP_CENTER
                                        ? ColorConst.accentColor
                                        : Colors.transparent)
                            ),
                            image: DecorationImage(
                                fit: BoxFit.fill,
                                image: NetworkImage(state
                                    .serverWatchFaceInfo['defaultBg'])),
                          ),
                          child: Container(
                            width: state.maxWidth.w / 3 * 2,
                            height: state.maxHeight.h / 3 * 2,
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                  fit: BoxFit.fill,
                                  image: NetworkImage(
                                      state.widgetPosition1Bg)),
                            ),),
                        ),
                      );
                    }),
                GetBuilder<DialLogic>(
                    id: 'position_index',
                    builder: (_) {
                      return GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          logic.setImageWatchFace(2).then((value) =>
                              logic.updatePositionIndex(2));
                        },
                        child: Container(
                          margin: EdgeInsets.only(top: 30.h, left: 42.w),
                          width: state.maxWidth.w / 3 * 2,
                          height: state.maxHeight.h / 3 * 2,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            border: Border(
                                left: BorderSide(width: 10.w,
                                    color: state.positionIndex ==
                                        DialState.POSITION_BOTTOM_CENTER
                                        ? ColorConst.accentColor
                                        : Colors.transparent),
                                top: BorderSide(width: 10.w,
                                    color: state.positionIndex ==
                                        DialState.POSITION_BOTTOM_CENTER
                                        ? ColorConst.accentColor
                                        : Colors.transparent),
                                right: BorderSide(width: 10.w,
                                    color: state.positionIndex ==
                                        DialState.POSITION_BOTTOM_CENTER
                                        ? ColorConst.accentColor
                                        : Colors.transparent),
                                bottom: BorderSide(width: 10.w,
                                    color: state.positionIndex ==
                                        DialState.POSITION_BOTTOM_CENTER
                                        ? ColorConst.accentColor
                                        : Colors.transparent)
                            ),
                            image: DecorationImage(
                                fit: BoxFit.fill,
                                image: NetworkImage(state
                                    .serverWatchFaceInfo['defaultBg'])),
                          ),
                          child: Container(
                            width: state.maxWidth.w / 3 * 2,
                            height: state.maxHeight.h / 3 * 2,
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                  fit: BoxFit.fill,
                                  image: NetworkImage(
                                      state.widgetPosition2Bg)),
                            ),),),
                      );
                    }),
              ],),
            Container(
              width: 900.w,
              height: 140.h,
              margin: EdgeInsets.fromLTRB(0.w, 100.h, 0.w, 100.h),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: ColorConst.gray50,
                  borderRadius: BorderRadius.circular(30)),
              child: Stack(
                children: [
                  GetBuilder<DialLogic>(
                      id: DialConst.dialUploadFileViewId,
                      builder: (_) {
                        return SizedBox(
                          width: 900.w,
                          height: 140.h,
                          child: ClipRRect(
                            borderRadius: const BorderRadius.all(
                                Radius.circular(100)),
                            child: LinearProgressIndicator(
                              value: state.uploadFileValue,
                              backgroundColor: ColorConst.gray50,
                              valueColor: AlwaysStoppedAnimation<Color>(
                                  ColorConst.accentColor),
                            ),),);
                      }),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      if (state.dialImagePath.isEmpty) {
                        logic.showTips('', LocaleKeys.dial_image_tips.ts);
                        return;
                      }
                      logic.uploadImageWatchFace();
                    },
                    child: Center(
                      child: GetBuilder<DialLogic>(
                        id: DialConst.dialUploadFileTextViewId,
                        builder: (_) {
                          return Text(_tabController.index == 2 &&
                              state.uploadFileText.isNotEmpty ? logic
                              .state.uploadFileText : LocaleKeys
                              .dial_download_sync.ts, style: TextStyle(
                              fontSize: 46.sp,
                              color: ColorConst.btnFontColor),);
                        },
                      ),
                    ),),
                ],),),
          ],),);
    });
  }

  Widget _buildItem(BuildContext context, index, DialModel model,
      bool canShow) {
    Widget widget = Stack(
      children: [
        GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            if (canShow && state.isShowSelected) {
              model.isSelect = !model.isSelect;
              state.downlodLists[index] = model.toJson();
              logic.update([DialConst.showSelectedViewId]);
              return;
            }
            int count = 0;
            for (var element in state.watchFaceInfo) {
              Map map = jsonDecode(jsonEncode(element));
              if ((4 & map['type']) == 4) {
                count++;
              }
            }
            if (count >= state.watchFaceCount &&
                state.downlodLists.isNotEmpty) {
              showDialog(context: context,
                  barrierDismissible: true,
                  builder: (_) {
                return DialLimitDialog(model);
              });
              return;
            }
            showDialog(context: context,
                barrierDismissible: true,
                builder: (_) {
                  return DialShowDialog(model);
                });
          },
          child: Column(
            children: [
              Image(image: NetworkImage(model.preview),
                width: 200.w,
                height: 200.w,),
              Container(
                margin: EdgeInsets.only(top: 16.h),
                child: Text(model.title, maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontSize: 42.sp, color: ColorConst.btnFontColor),),
              ),
              SizedBox(height: 31.h,),
              Container(
                width: 200.w,
                height: 80.h,
                alignment: Alignment.center,
                decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(
                          'assets/images/device/icon_dial_download_bg.png'),
                    )),
                child: Text(LocaleKeys.dial_download.ts, style: TextStyle(
                    fontSize: 36.sp, color: ColorConst.btnFontColor),),
              ),
              SizedBox(height: 20.h,),
            ],),
        ),
        GetBuilder<DialLogic>(
            id: DialConst.showSelectedViewId,
            builder: (_) {
              return Container(
                margin: EdgeInsets.only(left: 150.w, bottom: 50.h),
                child: Offstage(
                  offstage: !canShow || !state.isShowSelected,
                  child: Visibility(
                    visible: model.isSelect,
                    replacement: Opacity(opacity: 0.8, child: Image(
                      image: const AssetImage(
                          'assets/images/device/ic_circle_unchecked.png'),
                      width: 50.w, height: 50.w,),),
                    child: Image(
                        image: const AssetImage(
                            'assets/images/device/ic_circle_checked.png'),
                        width: 50.w, height: 50.w),
                  ),),
              );
            }),
      ],
    );
    return widget;
  }

  _onDelete() {
    List<DialModel> lists = [];
    for (var element in state.downlodLists) {
      DialModel dm = DialModel().fromJson(
          jsonDecode(element));
      if (dm.isSelect) {
        lists.add(dm);
      }
    }

    if (lists.isEmpty) {
      return;
    }

    showDialog(context: context,
        barrierDismissible: true,
        builder: (_) {
          return DialDialog(
              title: LocaleKeys.delete.ts,
              callback: () {
                for (DialModel element in lists) {
                  for (int i = 0; i < state.downlodLists.length;) {
                    DialModel dm = DialModel().fromJson(jsonDecode(state.downlodLists[i]));
                    if (element.id == dm.id) {
                      state.downlodLists.removeAt(i);
                      for (var info in state.watchFaceInfo) {
                        Map<dynamic, dynamic> map = jsonDecode(jsonEncode(info));
                        if (element.bleId == map['id']) {
                          logic.applyWatchFace(
                              map['id'],
                              map['version'],
                              2)
                              .then((value) {
                            logic.getWatchFaceInfo();
                          });
                        }
                      }
                    } else {
                      i++;
                    }
                  }
                }

                logger.d('======###>>${state.downlodLists}');
                logic.save('download_lists', state.downlodLists);
                logic.updateDownloadDials();
              });
        });
  }

}